<!DOCTYPE html>
<!--
  testfe.html
  用于测试的简单聊天室前端程序
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>testfe简单聊天室</title>
    <script src="./client.js"></script>
  </head>
  <body>
    <div id="output"></div>
    <input id="input">
    <button id="send" disabled>SEND</button>
    <script>
      const outputE = document.getElementById('output')
      const inputE = document.getElementById('input')
      const sendE = document.getElementById('send')
      function addOutput(text, color) {
        const el = document.createElement('div')
        el.innerText = text
        if (color) {
          el.style.color = color
          el.style.fontWeight = 'bold'
        }
        outputE.appendChild(el)
      }
      const con = connect('localhost:7788', msg => {
        if (msg.join) {
          con.ready()
          addOutput('joined the room', 'green')
        } else {
          addOutput('cannot join the room', 'red')
        }
      }, start => {
        sendE.disabled = !start
        addOutput('game ' + (start ? 'started' : 'stopped'), start ? 'green' : 'gray')
        if (!start) {
          con.ready()
        }
      }, msg => {
        addOutput(msg)
      }, () => {
        sendE.disabled = true
        addOutput('disconnected', 'red')
      })
      sendE.onclick = () => {
        if (inputE.value.length > 0) {
          con.send(inputE.value)
          inputE.value = ''
        } else {
          addOutput('cannot send empty message', 'red')
        }
      }
    </script>
  </body>
</html>
